<template>
    <div class="netCpuLoadBox">
        <el-row class="cpuLoadLine-box">
            <el-col :span="24">
                <div  ref="CpuLoad"></div>
            </el-col>
        </el-row>
        <el-row class="cpuLoadText-box">
            <el-col :span="24">
                <span>CPU使用率：{{this.cpuUsage? this.cpuUsage: '0'}}&nbsp;%</span>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'ospanlinfo',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "",
                },
            },
            xData: '',
            yData: '',
            cpuUsage: '',
            cpuData : this.cpuDataTest(),
            CpuLoad: {},
            EChartsOption: {
                animationDuration: 100,
                animationEasingUpdate: 'quinticInOut',
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    left: 'center',
                    top: 'middle',
                    width: '90%',
                    height: '90%',
                    containLabel: true
                },
                xAxis: {
                    // show:false,
                    type: 'category',
                    boundaryGap: false,
                    splitLine: {
                        show: false,
                        lineStyle: false
                    },
                    axisLine: {
                        color:'rgb(29, 140, 248)',
                        lineStyle:{ color:'rgb(29, 140, 248)' }
                    },
                    axisTick: { show: false },
                    axisLabel: { show: false },
                    data: this.initDataArr(),
                },
                // xAxis:{show:false, type: 'category',},
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 100,
                    splitNumber: 5,
                    axisLine: {
                        color:'rgb(29, 140, 248)',
                        lineStyle:{ color:'rgb(29, 140, 248)' }
                    },
                    axisTick: { show: false },
                    axisLabel: {
                        interval: 0,
                        margin: 2,
                        formatter: function (value, index) {
                            return value + '%';
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            opacity: 0.2,
                            type: 'dotted',
                            color: 'rgb(29, 140, 248)',
                        }
                    },
                },
                series: [{
                    name: 'CPU使用率',
                    data: this.cpuData,
                    type: 'line',
                    color: 'rgb(194, 131, 213)',
                    showSymbol: false,
                    areaStyle: {
                        opacity: 0.2
                    }
                }]
            },
            selectedNode: {},
            timerName: 'CpuLoad',
            timerEventName: 'timerCpuLoad',
            timerInterval: 1000 * 30,
            cpuLastSN: '0',
            updateFlag: false,
            getNum: 30
        }
    },
    created() {
        bus.$on('selectedNetMonID', msg => {
            this.selectedNode = msg;
            this.postData.filters.monid = this.selectedNode.selectedNETMonID;
            this.initGetData();
        }); 
        
        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {

                this.getData();
            }
        });
    },
    mounted() {
        this.CpuLoad = this.$echarts.init(this.$refs.CpuLoad);
        this.drawCPULine();
        window.onresize= () =>{
            let myEchart = this.$echarts.init(this.$refs.CpuLoad);
            myEchart.resize();
        }
    },
    computed: {},
    methods: {
        initGetData(){
            this.CpuLoad.showLoading({
                text: '加载中...',
                color: '#c23531',
                textColor: '#fff',
                maskColor: 'rgba(2, 16, 51, 0.8)',
                zlevel: 0,
                fontSize: 12,
                showSpinner: true,
                spinnerRadius: 10,
                lineWidth: 5
            });

            let _postData = {
                opera: 'CpuUsageLine',
                filters: {
                    "monid": this.postData.filters.monid,
                    "pointNum": this.getNum
                },
            };

            fetchData({
                postData : JSON.stringify(_postData)
            }).then((res) => {
                let _cpuNum = [];
                let _xAxisData = [];
                
                if (res.dataTotal > 0) {
                    res.data.forEach(element => {
                        _cpuNum.push(Number((100 - element.CPU_IDLE).toFixed(1)));
                        _xAxisData.push(element.RECORD_TIME);
                    });
                    
                    this.cpuLastSN = [...res.data].pop().SN;
                    this.cpuUsage = Number((100 - [...res.data].pop().CPU_IDLE).toFixed(1));
                } else {
                    this.cpuUsage = 0;
                }
                
                this.cpuData = _cpuNum;
                this.EChartsOption.xAxis.data = _xAxisData;

                this.CpuLoad.setOption({
                    xAxis: {
                        data: _xAxisData
                    },
                    series: {
                        data: _cpuNum
                    }
                });

                this.CpuLoad.hideLoading();
            });
        },
        getData(){
            let _postData = {
                opera: 'CpuUsageLine',
                filters: {
                    "monid": this.postData.filters.monid,
                    "pointNum":"1"
                },
            };

            fetchData({
                postData : JSON.stringify(_postData)
            }).then((res) => {
                
                if (res.dataTotal <= 0) {
                    this.xData = '';
                    this.yData = '';
                    this.cpuUsage = '';
                } else if ([...res.data].pop().SN != this.cpuLastSN) {
                    this.cpuLastSN = [...res.data].pop().SN;
                    this.xData = res.data[0].RECORD_TIME.replace(/\s+/g,"\n");
                    this.yData = (100 - res.data[0].CPU_IDLE).toFixed(1);
                    this.cpuUsage = this.yData;

                    // this.updateFlag = true;
                    this.cpuData.shift();
                    this.cpuData.push(this.yData);
                    this.EChartsOption.xAxis.data.shift();
                    this.EChartsOption.xAxis.data.push(this.xData);
                    this.CpuLoad.setOption({
                        xAxis: {
                            data: this.EChartsOption.xAxis.data
                        },
                        series: {
                            data: this.cpuData
                        }
                    });
                }
            });
        },
        drawCPULine(){
            this.CpuLoad.setOption(this.EChartsOption);
        },
        initDataArr() {
            let _arr = [];
            for (let i = 0; i < this.getNum; i++) {
                _arr.push('');
            }
            
            return _arr;
        },
        cpuDataTest() {
            let _arr = new Array(this.getNum);
            
            return _arr;
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
        
        this.CpuLoad.dispose();
    }
}
</script>

<style scoped>
.netCpuLoadBox{
    height: calc(100% - 22px - 8px);
    margin-bottom: 0 !important;
}

.cpuLoadLine-box{
    height: calc(100% - 24px);
}
.cpuLoadLine-box div{
    height: 100%;
}

.cpuLoadText-box{
    height: 24px;
    text-align: center;
    overflow: hidden;
}
.cpuLoadText-box div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: seashell;
}
</style>